<template>
  <div>
    <div class="pageWrap">
      <el-form ref="matchSignForm" :model="matchSignForm" >
        <el-form-item label="赛事报名时间">
        <el-date-picker
          v-model="matchSignForm.match_sign_date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy/MM/dd HH:mm:ss"
          format="yyyy/MM/dd HH:mm:ss"
        ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否开启报名">
          <el-switch v-model="matchSignForm.state"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitMatchSignForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageWrap" style="margin-top:10px;">
      <el-tabs v-model="activeGroup" @tab-click="groupChange">
        <el-tab-pane v-for="(v,i) in groupArr" :key="i" :label="v.name" :name="v.id+''"></el-tab-pane>
      </el-tabs>
      <!-- 赛项报名信息 -->
      <div>
      <el-form ref="groupSignForm" :model="groupSignForm" >
        <el-form-item label="赛项报名时间">
        <el-date-picker
          v-model="groupSignForm.group_sign_date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy/MM/dd HH:mm:ss"
          format="yyyy/MM/dd HH:mm:ss"
        ></el-date-picker>
        </el-form-item>
        <el-form-item label="赛项报名人数上限">
          <el-input style="width:50%" v-model="groupSignForm.name"><template slot="append">人</template></el-input>
        </el-form-item>
        <el-form-item label="是否审核">
          <el-switch v-model="matchSignForm.state"></el-switch>
        </el-form-item>
        <el-form-item label="默认价格">
          <el-input style="width:50%"  v-model="groupSignForm.price"><template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item>
          <div>
            <span>套餐设置</span>
            <el-button type="primary" style="margin-left:10px;" @click="addTactics">添加策略</el-button>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="套餐名称"  width="200">
              <template slot-scope="{ row }">
                <el-input v-model="row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="有效时间" width="400">
              <template slot-scope="{ row }">
              <el-date-picker
              style="width:400px"
                v-model="row.group_sign_date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy/MM/dd HH:mm:ss"
                format="yyyy/MM/dd HH:mm:ss"
              ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="信息方式"  width="150">
              <template slot-scope="{ row }"> 
                <el-select v-model="row.region" placeholder="请选择信息填写方式">
                  <el-option label="单人信息" value="single"></el-option>
                  <el-option label="多人信息" value="more"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="address2" label="人数下限"  width="80">
              <template slot-scope="{ row }">
                <el-input v-model="row.min"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address3" label="人数上限"  width="80">
              <template slot-scope="{ row }">
                <el-input v-model="row.max"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address4" label="价格"  width="120">
              <template slot-scope="{ row }">
                <el-input v-model="row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="danger" @click="delTactics">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitGroupSignForm">保存</el-button>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //富文本
  import RichTxt from "../../../components/editor/editor";
  export default {
    components: {
      RichTxt
    },
    data() {
      return {
        groupArr: [
          {name: '15KM',id: 1},
          {name: '20KM',id: 2},
        ],
        activeGroup: '1',
        tableData: [],
        matchSignForm:{}, //赛事报名信息设置
        groupSignForm:{} //赛项报名信息设置
      };
    },
    methods: {
      groupChange() {},
      // 赛事报名时间及状态保存
      onSubmitMatchSignForm(){},
      // 赛项报名信息保存
      onSubmitGroupSignForm(){},
      // 添加策略
      addTactics(){
        this.tableData.push({})
      },
      delTactics(){}
    },
    mounted() {

    }
  }
</script>

<style scoped>

</style>